<template>
	<view class="outBox">
		<u-navbar leftText="预约座位" leftIconColor="#fff" :autoBack="true" bgColor="#242331">
			<view class="left-slot" slot="left">
				 <u-icon name="arrow-left" color="#fff"></u-icon>
				<text>预约座位</text>
			</view>
			<view class="left-slot" slot="right" :style="{
				marginRight:barWidth + 'px'
			}">
				<text @click="getnav('/pages/reservation/mine')">我的预约</text>
			</view>
		</u-navbar>
		<view class="" :style="{
			marginTop:menuHeight + 'px',
		}">
			<video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop
				object-fit="cover"></video>
			<view class="content">
				<view class="numberItem">
					<view class="img">
						<image :src="baseImgUrl + '/new/img1.png'" mode="widthFix"></image>
					</view>
					<view class="numberBox">
						<view class="top">
							<text>男生人数</text>
						</view>
						<view class="number">
							<view class="bg">
								<image :src="baseImgUrl + '/new/img3.png'" mode="widthFix"></image>
							</view>
							<view class="imgBox" @click="handleDecrease(1)">
								<image class="icon1" :src="baseImgUrl + '/new/icon2.png'" mode="widthFix"></image>
							</view>
							<text>{{reservationForm.manNum}}</text>
							<view class="imgBox" @click="handleIncrease(1)">
								<image class="icon2" :src="baseImgUrl + '/new/icon1.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="numberItem">
					<view class="img">
						<image :src="baseImgUrl + '/new/img2.png'" mode="widthFix"></image>
					</view>
					<view class="numberBox">
						<view class="top">
							<text>女生人数</text>
						</view>
						<view class="number">
							<view class="bg">
								<image :src="baseImgUrl + '/new/img4.png'" mode="widthFix"></image>
							</view>
							<view class="imgBox" @click="handleDecrease(2)">
								<image class="icon1" :src="baseImgUrl + '/new/icon2.png'" mode="widthFix"></image>
							</view>

							<text>{{reservationForm.womenNum}}</text>
							<view class="imgBox" @click="handleIncrease(2)">
								<image class="icon2" :src="baseImgUrl + '/new/icon1.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="inputBox">
					<view class="name">
						<text>最高竞价</text>
					</view>
					<view class="value">
						<text>¥{{maxBiddingPrice}}</text>
					</view>
				</view>
				<view class="inputBox">
					<view class="name">
						<text>输入竞价</text>
					</view>
					<view class="value">
						<u--input inputAlign="right" type="number" color="#fff" v-model="reservationForm.bindingPrice"
							placeholder="输入竞价" border="bottom"></u--input>
					</view>
				</view>
				<view class="inputBox">
					<view class="name">
						<text>选择座位</text>
					</view>
					<view class="value">
						<view class="tag">
							<text>桌号</text>
						</view>
						<text>{{tableName}}</text>
					</view>
				</view>
				<view class="acceptBox">
					<view class="title">
						<text>是否接受组局</text>
					</view>
					<view class="btns">
						<view class="btn btn1" v-if="reservationForm.isAccept">
							<image class="icon" :src="baseImgUrl + '/new/img6.png'" mode="widthFix"></image>
							<text>是</text>
							<image class="bg" :src="baseImgUrl + '/new/img5.png'" mode="widthFix"></image>
						</view>
						<view class="btn btn1" @click="reservationForm.isAccept = true" v-else>
							<image class="icon" :src="baseImgUrl + '/new/img10.png'" mode="widthFix"></image>
							<text>是</text>
							<image class="bg" :src="baseImgUrl + '/new/img9.png'" mode="widthFix"></image>
						</view>
						<view class="btn btn2" v-if="reservationForm.isAccept == false">
							<image class="icon" :src="baseImgUrl + '/new/img12.png'" mode="widthFix"></image>
							<text>否</text>
							<image class="bg" :src="baseImgUrl + '/new/img11.png'" mode="widthFix"></image>
						</view>
						<view class="btn btn2" v-else @click="reservationForm.isAccept = false">
							<image class="icon" :src="baseImgUrl + '/new/img8.png'" mode="widthFix"></image>
							<text>否</text>
							<image class="bg" :src="baseImgUrl + '/new/img7.png'" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="myBtn" @click="handleSuccess">
					<text>确认</text>
				</view>
				<!-- <view class="btns">
					<view class="btn" @click="handleSuccess">
						确认
					</view>
				</view> -->
			</view>
		</view>

		<lingfeng-timepicker ref="timePop" type="datetime" :minDate="minDate" :maxDate="maxDate"
			@change="timeChange"></lingfeng-timepicker>

	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'


	export default {
		data() {
			return {
				// 胶囊的宽度
				baseImgUrl: this.$baseImgUrl,
				barWidth: 0,
				menuHeight: 0,
				reservationForm: {
					isAccept: false, // 接受组局
					phone: '', // 手机号
					time: '',
					seat: '', // 座位
					manNum: 1, // 男人数量
					womenNum: 1, // 女人数量
					bindingPrice: 1, // 竞价
          price:'', // 支付定金
				},
				showTimePicker: false, // 显示时间选择器
				minDate: {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1,
					date: new Date().getDate(),
					hour: new Date().getHours()
				},
				maxDate: {
					year: new Date().getFullYear(),
					month: 12,
					date: 31
				},
				// 座位号
				tableName: '',
				// 一口价
				fixedPrice: 0,
				// 座位id
				counterDetailId: '',
				baseImgUrl: this.$baseImgUrl,
				videoUrl: this.$videoUrl,
				// 当前最高竞价
				maxBiddingPrice:0,
			}
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.tableName = e.tableName || '-'
			// 当前最高竞价
			this.maxBiddingPrice = e.maxBiddingPrice
      // 支付定金
      this.reservationForm.price = e.price
			this.counterDetailId = e.counterDetailId
		},
		methods: {
			handleDecrease(type) {
				if (type == 1) {
					if (this.reservationForm.manNum == 0) return
					this.reservationForm.manNum -= 1
				} else {
					if (this.reservationForm.womenNum == 0) return
					this.reservationForm.womenNum -= 1
				}
			},
			// 人数增加
			handleIncrease(type) {
				console.log(type, "增加");
				if (type == 1) {
					this.reservationForm.manNum += 1
				} else {
					this.reservationForm.womenNum += 1
				}
			},
			// 发起支付
			handleSuccess() {
				if (this.validateInput()) {
					uni.setStorageSync('orderInfo', this.reservationForm)
					this.getnav('waitPay?type=2')
				}
			},
			// 验证输入
			validateInput() {
				if(this.reservationForm.bindingPrice == ''){
					this.$toast("请输入竞价金额")
					return false
				}

				if(this.reservationForm.bindingPrice < this.maxBiddingPrice){
					this.$toast("竞价金额不能小于【"+ this.maxBiddingPrice + "】")
					return false
				}
				return true
			},
			changeSharing(e) {
				console.log(e, "eee");
			},
			// 选择手机号
			changePhone(e) {
				this.reservationForm.phone = e
			}, // 选择人数
			changePeople(e) {
				this.reservationForm.peopleNum = e
			},
			// 选择时间
			handleTimePicker() {
				this.$refs.timePop.show();
			},
			// 确认选择
			confirmTimePicker() {
				this.showTimePicker = false
			},
			timeChange(e) {
				this.reservationForm.time = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.myBtn {
		background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		width: 648rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 64rpx auto ;

		text {
			font-size: 32rpx;
			color: #fff;
		}
	}

	.btns {
		width: 100%;
		position: relative;

		.btn {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;

			.bg {
				width: 100%;
				position: absolute;
				left: 0;
			}

			.icon {
				width: 44rpx;
				margin-right: 28rpx;
			}

			text {
				font-size: 28rpx;
				color: #FBDD87;
			}
		}

		.btn1 {
			left: 0;
		}

		.btn2 {
			right: 0;
		}

	}

	.acceptBox {
		padding: 28rpx 22rpx 42rpx;
		height: 210rpx;
		box-sizing: border-box;
		background: #161828;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25), 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		border: 2rpx solid #21253B;
		margin-top: 26rpx;

		.title {
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			margin-bottom: 28rpx;
		}
	}

	.inputBox {
		background-color: #171724;
		padding: 36rpx 46rpx;
		border-bottom: 2rpx solid #1c1d2f;
		display: flex;
		justify-content: space-between;

		.value {
			display: flex;
			align-items: center;

			.tag {
				background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				width: 90rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				text {
					font-size: 28rpx;
					color: #fff;
				}
			}

			text {
				color: #fff;
				font-size: 28rpx;
			}
		}

		.name {
			text {
				color: #B3B4C3;
				font-size: 28rpx;
			}
		}
	}

	.numberItem {
		display: flex;
		width: 550rpx;
		margin: 0 auto 100rpx;

		.numberBox {

			.top {
				text-align: center;
				margin-bottom: 18rpx;

				text {
					font-size: 32rpx;
					margin-bottom: 18rpx;
					color: #FFFFFF;
				}
			}

			.number {
				width: 324rpx;
				height: 98rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					text-align: center;
					position: relative;
					z-index: 99;
					font-size: 32rpx;
					font-weight: Bold;
					color: #fff;
				}

				.imgBox {
					padding: 50rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.icon1 {
					margin-left: 50rpx;
					position: relative;
					z-index: 999;
				}

				.icon2 {
					margin-right: 50rpx;
					position: relative;
					z-index: 999;
				}

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 324rpx;

					image {
						width: 100%;
					}
				}

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}

		.img {
			margin-right: 62rpx;

			image {
				width: 180rpx;
			}
		}
	}


	.width-20 {
		width: 20rpx;
		height: 20rpx;
	}

	.content {
		position: relative;
		box-sizing: border-box;
		border-radius: 30rpx;
		border-radius: 10rpx;
		padding-top: 106rpx;
	}

	.left-slot {
		color: #fff;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #21202d;
	}
</style>
